<template>
    <div class="manage">

      <Card :dis-hover="true" id="content">
        <Alert class="alert" type="success">管理员可收到用户审核信息</Alert>

        <!--S添加管理员-->
        <Button class="add-manage" type="primary" @click="showAddManage">
          添加管理员
        </Button>
        <!--E添加管理员-->

        <!--S数据列表-->
        <Table
          :columns="th"
          :data="tr"
        >
        </Table>
        <!--E数据列表-->
      </Card>

      <!--S编辑新增管理员-->
      <Modal
        v-model="edit.show"
        :title="edit.id ? '编辑管理员' : '添加管理员'"
        @on-visible-change="editShowChange"
        :footer-hide="true"
      >
        <Form ref="form" :model="edit.data" :rules="rule_form_data">
          <FormItem label="设置管理员" prop="uid">
            <member-input
              v-model="edit.data.uid"
              :toggle="date"
              :user="edit.data"
            ></member-input>
          </FormItem>
          <FormItem label="管理员邮箱" prop="email">
            <Input v-model="edit.data.email" placeholder="管理员邮箱"></Input>
          </FormItem>
          <Button type="primary" @click="submit('form')">确认</Button>
        </Form>
      </Modal>
      <!--E编辑新增管理员-->
    </div>
</template>

<script>
import MemberInput from '@/components/member-input'
export default {
  name: 'manage',
  data () {
    let self = this
    return {
      th: [
        {
          key: 'avatar',
          title: '头像',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.avatar
              },
              style: {
                width: '50px'
              }
            })
          }
        },
        {
          key: 'nickname',
          title: '昵称'
        },
        {
          key: 'email',
          title: '邮箱'
        },
        {
          key: 'handle',
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    self.edit = {
                      show: true,
                      id: params.row.id,
                      data: params.row
                    }
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                on: {
                  click: () => {
                    self.$Modal.confirm({
                      title: '确定要删除吗？',
                      onOk: () => {
                        this.$post('manage/remove', {
                          manage_id: params.row.id
                        })
                          .then((res) => {
                            if (!res.data.code) {
                              self.getList()
                            } else {
                              self.$Message.error('操作失败')
                            }
                          })
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      tr: [
        {
          avatar: 'John Brown'
        }
      ],
      edit: {
        show: false,
        id: 0,
        data: {
          uid: '',
          email: ''
        }
      },
      rule_form_data: {
        uid: [
          { required: true, message: '请扫码设置管理员' }
        ],
        email: [
          { required: true, message: '请设置邮箱', trigger: 'blur' },
          { type: 'email', message: '请设置正确的邮箱', trigger: 'blur' }
        ]
      },
      date: null
    }
  },
  computed: {
    data () {
      return {
        uid: this.edit.data.uid,
        email: this.edit.data.email
      }
    }
  },
  components: {
    MemberInput
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.$get('manage/getList')
        .then((res) => {
          let { code, data } = res.data
          if (!code) {
            this.tr = data
          } else {
            this.tr = []
          }
        })
    },
    /**
     * 显示添加区域
     */
    showAddManage () {
      this.edit = {
        show: true,
        id: 0,
        data: {
          uid: '',
          email: ''
        }
      }
    },
    /**
     * 显示添加区域状态改变
     */
    editShowChange (status) {
      let timestamp = new Date().getTime()
      this.date = status ? timestamp : -timestamp
    },
    /**
     * 提交
     */
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post('manage/handle', {
            manage_id: this.edit.id,
            data: this.data
          })
            .then((res) => {
              if (!res.data.code) {
                this.edit.show = false
                this.getList()
              } else {
                this.$Message.error(res.data.err_msg)
              }
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .alert{
    width: 600px;
  }
  #content{
    position: relative;
    .add-manage{
      position: absolute;
      right: 15px;
      top:15px;
    }
  }
</style>
